<template>
	<view class="search-collapse">
		<view class="container">
			<view class="collapse-head">
				<view class="collapse-head-box" v-for="(item, key, index) in formNames" :key="key"
					@click.stop="handleCollapse(key)">
					<view class="item" :class="{ 'active': isActive(key) }">
						<text>{{ item }}</text>
						<u-icon class="icon" name="arrow-down-fill"></u-icon>
					</view>
				</view>
				<view>
					<button class="reset-btn" size="mini" @click="reset">重置</button>
				</view>
			</view>

			<view class="collapse-body" v-if="collapseBodyShow">
				<view class="content">
					<slot name="content" :currentKey="currentKey">
						<view class="search-input">
							<u-input v-model="formData[currentKey]" clearable @confirm="confirmInput($event, 'name')" />
						</view>
					</slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'search-collapse',
	props: {
		formNames: {
			type: Object,
			default: () => { }
		},
		form: {
			type: Object,
			default: () => { }
		}
	},
	data() {
		return {
			collapseBodyShow: false,
			currentKey: null,
			formData: {}
		}
	},
	watch: {
		form: {
			handler(val) {
				this.formData = val
			},
			deep: true
		}
	},
	computed: {
		isActive() {
			return key => this.form[key] !== undefined && this.form[key] !== null && this.form[key] !== '';
		}
	},
	methods: {
		handleCollapse(e) {
			if (!this.collapseBodyShow) this.collapseBodyShow = true
			if (this.collapseBodyShow && this.currentKey == e) {
				this.collapseBodyShow = false
				this.currentKey = null
				this.$emit('key-change', { key: null });
				return
			}
			this.currentKey = e
			this.$emit('key-change', { key: e });
		},
		confirmInput(val, key) {
			this.formData[key] == val
			this.$emit('confirm', this.formData)
		},
		submit() {
			this.collapseBodyShow = false
			this.currentKey = null
			this.$emit('submit', this.formData)
		},
		reset() {
			this.$emit('reset', this.formData)
		}
	}
}
</script>

<style scoped lang="scss">
.search-collapse {
	position: relative;
	z-index: 10;

	.collapse-head {
		padding: 16rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: stretch;

		.collapse-head-box {
			display: flex;
			align-items: center;
		}

		.item {
			font-size: 26rpx;

			.icon {
				margin-left: 12rpx;
				font-size: 20rpx;
				transform: scale(0.7);
			}
		}

		.active {
			color: $main-color;
		}

		.reset-btn {
			height: 100%;
			// background-color: #FFFFFF;
			// border: 2rpx solid $main-color;
			// color: $main-color;
		}
	}

	.collapse-body {
		// --collapseBodyHeight: 256rpx;
		width: 100%;
		position: absolute;
		// bottom: calc(-1 * var(--collapseBodyHeight));
		padding: 26rpx 30rpx;
		// height: var(--collapseBodyHeight);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		background-color: #F2F3F5;
		border-radius: 0 0 16rpx 16rpx;
		box-shadow: 0px 4px 8px 0px rgba(208, 208, 208, 0.5);


		.content {
			flex: 1;
			height: 100%;
			overflow: hidden;

			.search-input {
				background-color: #fff;
				width: 100%;
				padding: 16rpx 34rpx;
				border-radius: 4px;
				font-size: 28rpx;
			}
		}



		.footer {
			margin-top: 20rpx;
			display: flex;

			button {
				flex: 1;
				border-radius: 16rpx;

				&:first-child {
					margin-right: 56rpx;
				}
			}
		}
	}
}
</style>